/* Tokens */
.ds-widgets {
    @import 'tailwindcss/base';
    @import 'tailwindcss/components';
    @import 'tailwindcss/utilities';

    font-size: 1.6rem;

    /* Colors */
    --color-body: #fff;
    --color-on-body: #222;

    --color-surface: #e6e6e6;
    --color-on-surface: #222;

    --color-primary: #222;
    --color-on-primary: #fff;

    --color-secondary: #ff0000;
    --color-on-secondary: #fff;

    --color-gray-1: #f3f4f6;
    --color-gray-2: #e5e7eb;
    --color-gray-3: #d1d5db;
    --color-gray-4: #9ca3af;
    --color-gray-5: #6b7280;
    --color-gray-6: #4b5563;
    --color-gray-7: #374151;
    --color-gray-8: #1f2937;
    --color-gray-9: #111827;

    /* Spacing: gaps, margin, padding, etc. */
    --spacing-xxs: 0.15625em;
    --spacing-xs: 0.3125em;
    --spacing-sm: 0.625em;
    --spacing-md: 1.25em;
    --spacing-lg: 2.5em;
    --spacing-xl: 3.75em;
    --spacing-2xl: 4.25em;
    --spacing-3xl: 4.75em;

    /* Font Families */
    --font-body: sans-serif;

    /* Font Sizes */
    --font-xs: 0.75em;
    --font-sm: 0.875em;
    --font-md: 1em;
    --font-lg: 1.125em;
    --font-xl: 1.25em;
    --font-2xl: 1.5em;
    --font-3xl: 1.875em;
    --font-4xl: 2.25em;
    --font-5xl: 3em;

    /* Font Weights */
    --font-thin: 100;
    --font-extralight: 200;
    --font-light: 300;
    --font-normal: 400;
    --font-medium: 500;
    --font-semibold: 600;
    --font-bold: 700;
    --font-extrabold: 800;
    --font-black: 900;

    /* Line Heights */
    --leading-none: 1;
    --leading-tight: 1.25;
    --leading-snug: 1.375;
    --leading-normal: 1.5;
    --leading-relaxed: 1.625;
    --leading-loose: 2;
    --leading-3: '.75em';
    --leading-4: '1em';
    --leading-5: '1.25em';
    --leading-6: '1.5em';
    --leading-7: '1.75em';
    --leading-8: '2em';
    --leading-9: '2.25em';
    --leading-10: '2.5em';
}

.ds-widgets input[type='checkbox'] {
    font-size: 80%;
    margin: 0;
    top: 0;
}

.block-display {
    display: block;
}

.loading-spinner-on-mobile {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}
